<template>
  <!-- // 分配角色 -->
  <div>
    <el-checkbox-group v-model="roleIds">
      <!-- 注意：label决定当前选中的值 -->
      <el-checkbox v-for="item in list" :key="item.id" :label="item.id">
        {{ item.name }}
      </el-checkbox>
    </el-checkbox-group>
  
    <div style="margin-top: 20px; text-align: right">
      <el-button type="primary" @click="onSubmit">确定</el-button>
      <el-button @click="emit('close')">取消</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getRoles } from '@/api/settings'
import { getProfileById } from '@/api/user'
import { assignRoles } from '@/api/employees'
const list =ref<Roles[]>()
type Roles={
    description :string
    id:string
    name:string
}
const loadRoles =async() => {
  try {
    const res = await getRoles({ page: 1, pagesize: 100 })
    console.log('getRoles',res)
    list.value=res.data.rows
  } catch (error) {
    console.log(error)
  }
}
loadRoles()
const props= defineProps<{
    id:string
}>()
const emit=defineEmits(['close','success'])
//选中权限
const roleIds=ref<string[]>()
const loadProfileById =async() => {
  try {
    const res = await getProfileById(props.id)
    console.log('getProfileById',res)
    roleIds.value=res.data.roleIds
  } catch (error) {
    console.log(error)
  }
}
loadProfileById()
//修改权限
const loadAssignRoles =async() => {
  try {
    const res = await assignRoles({ id:props.id ,roleIds:roleIds.value! })
    console.log('assignRoles',res)
    emit('success')
    loadRoles()
  } catch (error) {
    console.log(error)
  }
}
const onSubmit=() => {
  loadAssignRoles()
}
//重置复选框
const resestCheck=() => roleIds.value=[]
defineExpose({ loadProfileById, resestCheck })
</script>